.active-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  &--active {
    animation: show 0.2s ease-in-out both;
  }
  &--inactive {
    animation: hide 0.2s ease-in-out both;
  }
}

@keyframes show {
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  0% {
    opacity: 0;
    transform: translateX(-10px) scale(0.9);
  }
}

@keyframes hide {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform:translateX(10px) scale(0.9);
  }
}
